<template>
  <ContentWrap>
    <el-row :gutter="20">
      <!-- 左侧：图片上传和识别 -->
      <el-col :span="12" :lg="11" :md="24" :sm="24" :xs="24">
        <el-card class="upload-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><upload-filled/></el-icon>
              <span>OCR识别测试</span>
            </div>
          </template>
          
          <el-form :model="recognizeForm" label-width="100px" class="upload-form">
            <el-form-item label="选择配置">
              <el-select
                v-model="recognizeForm.configId"
                placeholder="请选择OCR配置"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="config in configList"
                  :key="config.id"
                  :label="config.name"
                  :value="config.id"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="上传图片">
              <el-upload
                ref="uploadRef"
                :action="uploadUrl"
                :headers="uploadHeaders"
                :file-list="fileList"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :limit="1"
                :on-exceed="handleExceed"
                :show-file-list="false"
                drag
                accept="image/*"
                class="upload-area"
              >
                <!-- 未上传时显示上传提示 -->
                <div v-if="!recognizeForm.imageUrl" class="upload-placeholder">
                  <el-icon class="el-icon--upload"><upload-filled/></el-icon>
                  <div class="el-upload__text">
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip">
                    支持 jpg/png/gif 格式，文件大小不超过 10MB
                  </div>
                </div>
                <!-- 已上传时显示图片 -->
                <div v-else class="uploaded-image-container">
                  <el-image
                    :src="convertOssUrlToProxy(recognizeForm.imageUrl)"
                    class="uploaded-image"
                    fit="contain"
                    :preview-src-list="[convertOssUrlToProxy(recognizeForm.imageUrl)]"
                    :initial-index="0"
                    preview-teleported
                  />
                  <div class="image-overlay">
                    <el-button size="small" type="danger" plain @click.stop="removeImage">
                      <el-icon><delete/></el-icon>
                      移除
                    </el-button>
                    <el-tag size="small" type="success">已上传</el-tag>
                  </div>
                </div>
              </el-upload>
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                @click="handleRecognize"
                :loading="recognizing"
                :disabled="!recognizeForm.configId || !recognizeForm.imageUrl"
                size="large"
                style="width: 100%"
              >
                <el-icon><camera/></el-icon>
                开始识别
              </el-button>
            </el-form-item>
            
            <el-form-item>
              <el-button 
                @click="handleReset" 
                size="large"
                style="width: 100%"
              >
                <el-icon><refresh/></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>
          

        </el-card>
      </el-col>
      
      <!-- 右侧：识别结果 -->
      <el-col :span="12" :lg="13" :md="24" :sm="24" :xs="24">
        <el-card class="result-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><document/></el-icon>
              <span>识别结果</span>
            </div>
          </template>
          
          <div v-if="recognizeResult && recognizeResult.text" class="result-content">
            <!-- 识别文本区域 -->
            <div class="result-text-section">
              <div class="section-header">
                <el-icon><document /></el-icon>
                <span>识别文本</span>
              </div>
              <el-input
                v-model="recognizeResult.text"
                type="textarea"
                :rows="6"
                readonly
                class="result-textarea"
                placeholder="识别结果将显示在这里..."
              />
            </div>
            
            <!-- 置信度区域 -->
            <div class="confidence-section">
              <div class="section-header">
                <el-icon><list /></el-icon>
                <span>识别置信度</span>
              </div>
              <div class="confidence-container">
                <el-progress
                  :percentage="recognizeResult.confidence ? Math.round(recognizeResult.confidence * 100) : 0"
                  :color="getConfidenceColor(recognizeResult.confidence || 0)"
                  :stroke-width="14"
                  class="confidence-progress"
                  :show-text="false"
                />
                <div class="confidence-info">
                  <span class="confidence-text">
                    {{ recognizeResult.confidence ? Math.round(recognizeResult.confidence * 100) : 0 }}%
                  </span>
                  <span class="confidence-label">
                    {{ getConfidenceLabel(recognizeResult.confidence || 0) }}
                  </span>
                </div>
              </div>
            </div>
            

          </div>
          <el-empty v-else description="暂无识别结果" :image-size="120" />
        </el-card>
      </el-col>
    </el-row>
  </ContentWrap>
  
  <!-- 识别记录 -->
  <ContentWrap class="mt-8">
    <el-card class="record-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon><clock/></el-icon>
            <span>识别记录</span>
            <el-tag size="small" type="success">{{ recordTotal }} 条记录</el-tag>
          </div>
          <div class="header-right">
            <el-button size="small" @click="getRecordList" :loading="recordLoading">
              <el-icon><refresh/></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="records-table-container">
        <el-table v-loading="recordLoading" :data="recordList" stripe class="record-table">
          <el-table-column prop="id" label="记录ID" width="80" align="center" />
          <el-table-column prop="configName" label="配置名称" width="80" show-overflow-tooltip>
            <template #default="scope">
              <el-tag size="small" type="primary" plain>
                {{ scope.row.configName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="imageUrl" label="图片" width="100" align="center">
            <template #default="scope">
              <div class="table-image-container">
                <el-image
                  :src="convertOssUrlToProxy(scope.row.imageUrl)"
                  class="table-image"
                  fit="cover"
                  :preview-src-list="[convertOssUrlToProxy(scope.row.imageUrl)]"
                  preview-teleported
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="recognitionText" label="识别文本" width="100" show-overflow-tooltip />

          <el-table-column prop="confidence" label="置信度" width="120" align="center">
            <template #default="scope">
              <el-tag :type="getConfidenceTagType(scope.row.confidence || 0)" size="small" round>
                {{ scope.row.confidence ? Math.round(scope.row.confidence * 100) : 0 }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small" round>
                {{ scope.row.status === 1 ? '成功' : '失败' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="识别时间"
            width="180"
            align="center"
            :formatter="dateFormatter"
          >
            <template #default="scope">
              <div class="time-cell">
                <el-icon><clock/></el-icon>
                <span>{{ dateFormatter(scope.row, null, scope.row.createTime) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" align="center">
            <template #default="scope">
              <div style="display: flex; gap: 8px; justify-content: center;">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="viewRecordDetail(scope.row)"
                >
                  <el-icon><view/></el-icon>
                  详情
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  plain
                  @click="deleteRecord(scope.row)"
                >
                  <el-icon><delete/></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <Pagination
          :total="recordTotal"
          v-model:page="recordQuery.pageNo"
          v-model:limit="recordQuery.pageSize"
          @pagination="getRecordList"
        />
      </div>
    </el-card>
  </ContentWrap>

  <!-- 记录详情弹窗 -->
  <el-dialog
    v-model="detailDialogVisible"
    title="识别记录详情"
    width="800px"
    :close-on-click-modal="false"
    class="detail-dialog"
  >
    <div v-if="selectedRecord" class="detail-content">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="记录ID">{{ selectedRecord.id }}</el-descriptions-item>
            <el-descriptions-item label="配置名称">{{ selectedRecord.configName || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="文件名">{{ selectedRecord.fileName }}</el-descriptions-item>
            <el-descriptions-item label="识别状态">
              <el-tag :type="selectedRecord.status === 1 ? 'success' : 'danger'">
                {{ selectedRecord.status === 1 ? '成功' : '失败' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="置信度">
              <el-tag :type="getConfidenceTagType(selectedRecord.confidence || 0)">
                {{ selectedRecord.confidence ? Math.round(selectedRecord.confidence * 100) : 0 }}%
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="识别时间">{{ formatDateTime(selectedRecord.createTime) }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <div class="detail-image-container">
            <el-image
              :src="convertOssUrlToProxy(selectedRecord.imageUrl)"
              class="detail-image"
              fit="contain"
              :preview-src-list="[convertOssUrlToProxy(selectedRecord.imageUrl)]"
              preview-teleported
            />
          </div>
        </el-col>
      </el-row>
      
      <el-divider>识别文本</el-divider>
      <el-input
        v-model="selectedRecord.recognitionText"
        type="textarea"
        :rows="6"
        readonly
        class="detail-textarea"
      />
      
      <div v-if="selectedRecord.errorMessage" class="error-section">
        <el-divider>错误信息</el-divider>
        <el-alert
          :title="selectedRecord.errorMessage"
          type="error"
          :closable="false"
          show-icon
        />
      </div>
    </div>
    
    <template #footer>
      <el-button @click="detailDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { 
  UploadFilled, 
  Camera, 
  Refresh, 
  Picture, 
  Document, 
  List, 
  Clock, 
  View,
  Upload,
  Delete,
  Download
} from '@element-plus/icons-vue'
import { dateFormatter } from '@/utils/formatTime'
import { getAccessToken } from '@/utils/auth'
import {
  getOcrConfigSimpleList,
  recognizeOcr,
  getOcrRecordPage,
  deleteOcrRecord,
  type OcrRecognizeReqVO,
  type OcrRecognizeRespVO
} from '@/api/infra/ocr'

/** OCR识别测试 */
defineOptions({ name: 'InfraOcrRecognize' })

const message = useMessage() // 消息弹窗

// URL 转换函数：将阿里云 OSS URL 转换为代理 URL
const convertOssUrlToProxy = (ossUrl: string) => {
  if (!ossUrl) return ''
  
  // 检查是否是阿里云 OSS URL
  if (ossUrl.includes('is-adi-there.oss-cn-beijing.aliyuncs.com')) {
    // 提取 OSS URL 中的路径部分
    const url = new URL(ossUrl)
    const pathname = url.pathname
    const search = url.search
    
    // 返回通过代理的 URL
    return `/oss-proxy${pathname}${search}`
  }
  
  // 如果不是 OSS URL，直接返回原 URL
  return ossUrl
}

// 上传相关
const uploadUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
const uploadHeaders = ref({
  Authorization: 'Bearer ' + getAccessToken()
})
const uploadRef = ref()
const fileList = ref([])

// 识别表单
const recognizeForm = ref({
  configId: undefined,
  imageUrl: ''
})
const recognizing = ref(false)
const recognizeResult = ref<OcrRecognizeRespVO | null>(null)

// 配置列表
const configList = ref([])

// 记录列表
const recordLoading = ref(false)
const recordList = ref([])
const recordTotal = ref(0)
const recordQuery = reactive({
  pageNo: 1,
  pageSize: 10
})

// 详情弹窗
const detailDialogVisible = ref(false)
const selectedRecord = ref<any>(null)

/** 获取配置列表 */
const getConfigList = async () => {
  try {
    configList.value = await getOcrConfigSimpleList()
  } catch (error) {
    console.error('获取配置列表失败:', error)
  }
}

/** 文件上传成功 */
const handleUploadSuccess = (response: any) => {
  if (response.code === 0) {
    recognizeForm.value.imageUrl = response.data
    // 清空文件列表，避免在上传组件中显示文件
    fileList.value = []
    message.success('图片上传成功')
  } else {
    message.error('图片上传失败：' + response.msg)
  }
}

/** 文件上传失败 */
const handleUploadError = () => {
  message.error('图片上传失败')
}

/** 上传前检查 */
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isImage) {
    message.error('只能上传图片文件!')
    return false
  }
  if (!isLt10M) {
    message.error('图片大小不能超过 10MB!')
    return false
  }
  return true
}

/** 文件数量超出限制 */
const handleExceed = () => {
  message.warning('只能上传一张图片')
}

/** 开始识别 */
const handleRecognize = async () => {
  if (!recognizeForm.value.configId) {
    message.warning('请选择OCR配置')
    return
  }
  if (!recognizeForm.value.imageUrl) {
    message.warning('请上传图片')
    return
  }

  recognizing.value = true
  try {
    const data: OcrRecognizeReqVO = {
      configId: recognizeForm.value.configId,
      imageUrl: recognizeForm.value.imageUrl
    }
    recognizeResult.value = await recognizeOcr(data)
    
    // 调试日志：检查识别结果
    console.log('OCR识别结果:', recognizeResult.value)
    console.log('words数组长度:', recognizeResult.value?.words?.length)
    console.log('words数组内容:', recognizeResult.value?.words)
    
    // 将识别结果保存到localStorage，供司机表单使用
    if (recognizeResult.value) {
      localStorage.setItem('ocrRecognizeResult', JSON.stringify(recognizeResult.value))
      console.log('OCR识别结果已保存到localStorage')
    }
    
    message.success('识别完成')
    // 刷新记录列表
    await getRecordList()
  } catch (error) {
    message.error('识别失败：' + error.message)
  } finally {
    recognizing.value = false
  }
}

/** 移除图片 */
const removeImage = () => {
  recognizeForm.value.imageUrl = ''
  fileList.value = []
  uploadRef.value?.clearFiles()
  message.success('图片已移除')
}

/** 重置表单 */
const handleReset = () => {
  recognizeForm.value = {
    configId: undefined,
    imageUrl: ''
  }
  recognizeResult.value = null
  fileList.value = []
  uploadRef.value?.clearFiles()
}

/** 获取置信度颜色 */
const getConfidenceColor = (confidence: number) => {
  if (confidence >= 0.8) return '#67c23a'
  if (confidence >= 0.6) return '#e6a23c'
  return '#f56c6c'
}

/** 获取置信度标签类型 */
const getConfidenceTagType = (confidence: number) => {
  if (confidence >= 0.9) return 'success'
  if (confidence >= 0.7) return 'warning'
  return 'danger'
}

/** 获取进度条颜色 */
const getProgressColor = (confidence: number) => {
  if (confidence >= 0.9) return '#67c23a'
  if (confidence >= 0.7) return '#e6a23c'
  return '#f56c6c'
}



/** 获取置信度标签文本 */
const getConfidenceLabel = (confidence: number) => {
  if (confidence >= 0.9) return '极高'
  if (confidence >= 0.8) return '高'
  if (confidence >= 0.6) return '中等'
  if (confidence >= 0.4) return '较低'
  return '低'
}

/** 格式化日期时间 */
const formatDateTime = (dateTime: any) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

/** 获取记录列表 */
const getRecordList = async () => {
  recordLoading.value = true
  try {
    const data = await getOcrRecordPage(recordQuery)
    recordList.value = data.list
    recordTotal.value = data.total
  } finally {
    recordLoading.value = false
  }
}

/** 查看记录详情弹窗 */
const viewRecordDetail = (record: any) => {
  selectedRecord.value = record
  detailDialogVisible.value = true
}

/** 查看记录详情（旧方法，保留兼容性） */
const viewRecord = (record: any) => {
  // 将记录数据设置到识别结果中显示
  recognizeResult.value = {
    text: record.recognitionText || '',
    confidence: record.confidence || 0,
    words: [] // 历史记录可能没有详细的words信息
  }
  recognizeForm.value.imageUrl = record.imageUrl || record.fileUrl
}

/** 删除记录 */
const deleteRecord = async (record: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除这条识别记录吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await deleteOcrRecord(record.id)
    message.success('删除成功')
    await getRecordList()
  } catch (error) {
    if (error !== 'cancel') {
      message.error('删除失败：' + error.message)
    }
  }
}

/** 初始化 */
onMounted(async () => {
  await getConfigList()
  await getRecordList()
})
</script>

<style scoped>
/* 卡片样式 */
.upload-card,
.result-card,
.record-card {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.upload-card:hover,
.result-card:hover,
.record-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.card-header .el-icon {
  font-size: 18px;
  color: #409eff;
}

/* 上传区域样式 */
.upload-form {
  padding: 0;
}

.upload-area {
  width: 100%;
}

.upload-area .el-upload {
  width: 100%;
}

.upload-area .el-upload-dragger {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  border: 2px dashed #d9d9d9;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-area .el-upload-dragger:hover {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
}

.upload-area .el-upload-dragger.is-dragover {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  transform: scale(1.02);
}

.el-upload__tip {
  color: #606266;
  font-size: 12px;
  margin-top: 7px;
}

/* 上传占位符样式 */
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

/* 已上传图片容器样式 */
.uploaded-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploaded-image {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.uploaded-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 图片覆盖层样式 */
.image-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.uploaded-image-container:hover .image-overlay {
  opacity: 1;
}



/* 结果区域样式 */
.result-content {
  padding: 0;
}

.result-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.result-textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.confidence-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8eaed;
}

.confidence-progress {
  flex: 1;
  margin-right: 8px;
}

.confidence-text {
  font-weight: 700;
  color: #409eff;
  font-size: 18px;
  text-align: center;
}



/* 记录表格样式 */
.record-table {
  border-radius: 8px;
  overflow: hidden;
}

.table-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.table-image {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s ease;
}

.table-image:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.records-table-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8eaed;
  margin-bottom: 20px;
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #303133;
}



.confidence-cell {
  padding: 8px;
  min-width: 160px;
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

/* 详情弹窗样式 */
.detail-dialog {
  border-radius: 12px;
}

.detail-content {
  padding: 0;
}

.detail-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
}

.detail-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.error-section {
  margin-top: 20px;
}

/* 结果展示区域样式 */
.result-text-section,
.confidence-section {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #fafbfc 0%, #f5f6fa 100%);
  border-radius: 12px;
  border: 1px solid #e8eaed;
  transition: all 0.3s ease;
}

.result-text-section:hover,
.confidence-section:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #303133;
  font-size: 15px;
}

.section-header .el-icon {
  color: #409eff;
  font-size: 16px;
}

.confidence-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.confidence-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .el-col {
    margin-bottom: 20px;
  }
  
  .result-text-section,
  .confidence-section {
    padding: 16px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .confidence-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .confidence-info {
    align-items: center;
  }
  
  .table-image {
    width: 50px;
    height: 35px;
  }
  
  .image-preview-container {
    min-height: 200px;
    padding: 16px;
  }
  
  .preview-image {
    max-height: 250px;
  }
  
  .upload-area .el-upload-dragger {
    height: 160px;
  }
}

/* 动画效果 */
.el-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 加载状态优化 */
.el-loading-mask {
  border-radius: 8px;
}

/* 按钮样式优化 */
.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #303133;
}

.el-table td {
  padding: 12px 0;
}

/* 标签样式优化 */
.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

/* 分割线样式 */
.el-divider {
  margin: 24px 0;
}

.el-divider__text {
  font-weight: 600;
  color: #409eff;
  background-color: #fff;
  padding: 0 16px;
}

/* 空状态样式 */
.el-empty {
  padding: 40px 0;
}

.el-empty__description {
  color: #909399;
  font-size: 14px;
}
</style>